$(function(){
    // 渲染第一页
    var currpage = 1
    var render = function(){
        getproductdata({
            page:currpage,
            pageSize:2
        },function(data){
            // 渲染页面
            $('tbody').html(template('template',data));
              // 渲染分页
              setPagenitor(data.page,Math.ceil(data.total/data.size))
        })
    }
    render();
  
     // 2.分页展示
     var setPagenitor = function (currPage, totalPages) {
        $('#paginator').bootstrapPaginator({
            // 版本
            bootstrapMajorVersion: 3,
            // 当前页
            currentPage: currPage,
            // 总页数
            totalPages: totalPages,
            size: 'small',
            itemTexts: function (type, page, current) {//设置显示的样式，默认是箭头
                switch (type) {
                    case "first":
                        return "首页";
                    case "prev":
                        return "上一页";
                    case "next":
                        return "下一页";
                    case "last":
                        return "末页";
                    case "page":
                        return page;
                }
            },
            //点击事件
            onPageClicked: function (event, originalEvent, type, page) {
                // console.log(page);
                // page为当前你点击的页面
                // 将页码改为点击的页码，在进行渲染
                currpage = page;
                render();
            }

        })
    }
    
    // 添加商品
    $('.add-btn').on('click',function(){
        $('#editModal').modal('show')
    })
// 渲染选择品牌下拉框
getbranddata(function(data){
    $('.dropdown-menu').html(template('dropdown',data));
})

$('.dropdown-menu').on('click','li',function(){
    $('.choose').html($(this).html())
    $('[name="brandId"]').val($(this).data('id'))
    $('#form').data('bootstrapValidator').updateStatus('brandId', 'VALID')
})




// 表单的校验
// 自定义校验规则
$.fn.bootstrapValidator.validators.checknum = {
    validate:function(validator,$filed,options){
        var text = $.trim($filed.val());
        // 不能为空，为正整数
        if(!text) return {valid:false,message:'请输入商品库存'};
        if(!/^[1-9]\d*$/.test(text)) return {valid:false,message:'请输入合法的库存'};
        // 如果都不是则正确
        return true;
    }
} 

// 5.3 pic图片验证
$.fn.bootstrapValidator.validators.checkPic = {
    validate:function (validate, $field, options) {
        if(piclist.length !=3) return {valid: false, message: '请上传三张图片'}
        return true
    }
}
// 校验
$('#form').bootstrapValidator({

    // 校验插件会默认忽略隐藏的元素
    excluded:[],//不忽略任何情况的表单元素
    // 默认的样式
    feedbackIcons: {/*input状态样式图片*/
        valid: 'glyphicon glyphicon-ok',
        invalid: 'glyphicon glyphicon-remove',
        validating: 'glyphicon glyphicon-refresh'
    },
    // 校验规则
    fields:{
        brandId:{
            validators: {
                notEmpty: {//非空验证：提示消息
                    message: '请选择品牌分类'
                }
            }
        },
        proName:{
            validators: {
                notEmpty: {//非空验证：提示消息
                    message: '请输入产品名称'
                }
            }
        },
        proDesc:{
            validators: {
                notEmpty: {//非空验证：提示消息
                    message: '请输入产品描述'
                }
            }
        },
        num:{
            validators: {
                checknum:{}
            }
        },
        size:{
            validators: {
                notEmpty: {//非空验证：提示消息
                    message: '请输入产品尺码'
                }
            }
        },
        oldPrice:{
            validators: {
                notEmpty: {//非空验证：提示消息
                    message: '请输入产品原价'
                }
            }
        },
        price:{
            validators: {
                notEmpty: {//非空验证：提示消息
                    message: '请输入折扣价'
                }
               
            }
        }
        ,
        pic1:{
            validators: {
                checkPic:{}
            }
        }

    }
}).on('success.form.bv', function(e) {//点击提交之后
    // 禁用默认提交事件，使用ajax来提交
    // console.log(11111);
    e.preventDefault();
    // console.log(11111);
    // 获取当前表单的值
    var $form = $(e.target);
    var data = $form.serialize();
    // console.log(data);
    /*图片上传的参数名称*/
        /*picName1=picAddr1*/
        /*picName2=picAddr2*/
        /*picName3=picAddr3*/
        /*每次上传成功记录一下  通过数组*/
        $.each(piclist,function (i,item) {
            data += '&picName' + (i+1) + '='+item.picName + '&picAddr'+(i+1) + '='+item.picAddr
        })
    // 发送ajax请求
    $.ajax({
        type:'post',
        url:'/product/addProduct',
        data:data,
        dataType:'json',
        success:function(data){
            if(data.success){
                // 关闭模态框
                $('#editModal').modal('hide');
                // 渲染第一页
                currpage =1;
                render();
                // 重置初始化表单数据
                $("form").data('bootstrapValidator').resetForm();
                $('img').remove();
                $('.choose').html('请选择');

            }
        }
    })

})


// 图片的上传，预览
picupload()




})

// 获取数据
var getproductdata = function(pramas,callback){
    $.ajax({
        type:'get',
        url:'/product/queryProductDetailList',
        data:pramas,
        dataType:'json',
        success:function(data){
            callback && callback(data)
        }
    })
}
// 获取品牌数据
var getbranddata = function(callback){
    $.ajax({
        type:'get',
        url:'/category/querySecondCategoryPaging',
        data:{page:1,pageSize:999},
        dataType:'json',
        success:function(data){
            callback && callback(data)
        }
    })
}

// 图片的上传
// name的值为ajax请求端口需要的参数
// data-url为接口
var piclist = []
var picupload = function(){
    $('[type="file"]').fileupload({
        dataType: 'json',
        done: function (e, data) {
            // console.log(data);
            // 预览
            if(piclist.length < 3){
                $('.image').append('<img src="'+data.result.picAddr+'" id="image" width="100">');
                piclist.push(data.result)
                console.log(piclist.length)
                // console.log(piclist)
                if(piclist.length==3){
                    console.log(1111)
                    console.log($('#form'))
                    $('#form').data('bootstrapValidator').updateStatus('pic1','VALID')
                }
            }
        }   
    });
}